<template>
	<div class="app-content">
		<div class="app-main has-footer-bar auto-fill-flex">
			<div class="large-search">
				<el-input class="large-search-input" v-model="keyWord" placeholder="请输入客群名称" />
				<el-button type="primary" class="footer-button margin-l-20" @click="searchPage">查询</el-button>
				<div class="vi-container margin-t-20">
					<el-pagination class="float--right" background layout="prev, pager, next" @current-change="loadSelectList" v-model:current-page="pager.page" :page-size="pager.size" :total="total"/>
				</div>
			</div>
			<div class="auto-fill-content padding-20-lr auto-fill-content--y">
				<el-row :gutter="20" v-loading="loading" class="vi-row-flex--stretch">
					<el-empty class="vi-empty-center" v-if="total<=0" description="数据为空" />
					<el-col v-else :span="8" class="margin-tb clear-margin--top" v-for="list in planValueLists">
						<customer-item :item-list="list" @selectionChange="selectionChange"></customer-item>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="app-footer footer-bar border--top">
			<div class="row-option">
				<el-button class="footer-button" @click="goPrev">取消</el-button>
				<el-button class="footer-button" type="primary" plain @click="goNext">下一步</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" name="work-planning-select-customer" setup>
import { router, service, storage } from "/@/cool";
import { ElMessage } from 'element-plus'
import CustomerItem from "/$/planning/components/customerItem.vue";
import { onMounted, reactive, ref } from "vue";
import {config} from '/@/utils/global'
const pager=reactive({
	page:1,
	size:config.PAGE_SIZE,
})
let loading = ref<boolean>(false);
let total = ref<number>(0)
let keyWord= ref<string>("")
let planValueLists = ref<any[]>([]);
//获取客群信息
const getMySelect=async ()=>{
	let result:any=await service.customer.cluster.page({...pager,keyWord:keyWord.value}).catch((error)=>{
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		loading.value=false;
		return;
	}).finally(()=>{
		loading.value=false;
	});
	console.log(result);
	planValueLists.value=result.list;
	total.value=result.pagination.total;
}
const loadSelectList=(value:number)=>{
	pager.page=value;
	getMySelect();
}
//查询客户数据
const searchPage = () => {
	loadSelectList(1);
}
onMounted(()=>{
	getMySelect();
})
let selectPlanValueLists:any[]=[];
const selectionChange=(planValueList:any)=>{
	if(selectPlanValueLists.length>=5){
		planValueList.checked=false;
		ElMessage({
			message: "最多选择5个",
			type: 'warning',
		})
		return;
	}
	if(planValueList.checked){
		selectPlanValueLists.push(planValueList);
	}else{
		let index = selectPlanValueLists.findIndex((item)=>{return item.id === planValueList.id});
		selectPlanValueLists.splice(index,1);
	}
}
const goPrev = ()=>{
	router.back();
}
const goNext = ()=>{
	if(selectPlanValueLists.length<=0){
		ElMessage({
			message: "至少选择1个",
			type: 'warning',
		})
		return;
	}
	let clusterIds = selectPlanValueLists.map((item)=>{return item.id}).join(",");
	let keywords = selectPlanValueLists.map((item)=>{return item.clusterCharacteristics}).join("---");
	storage.set("keywords",keywords)
	router.push({
		path:"/work/planning/planning-list",
		query:{
			clusterIds:clusterIds
		}
	})
}
</script>
<style scoped lang="scss">
.large-search{
	width: 100%;
	padding: 20px 0;
	box-sizing: border-box;
	overflow: auto;
	text-align: center;
	.large-search-input{
		width: 940px;
	}
}
.margin-tb{
	margin-top: 20px;
	margin-bottom: 20px;
}
</style>
